<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="嗨购登录" left-text="返回" left-arrow @click-left="$router.back()">
            </van-nav-bar>
        </header>
        <div class="content">
            <van-field v-model="loginname" clearable placeholder="请输入用户名/手机号/邮箱" />
            <van-field v-model="password" :type="type" @click-right-icon="changeType" :right-icon="typeIcon"
                placeholder="请输入密码 " />
            <p v-show="flag"> 请输入至少6位密码，包含至少一个大写字母，1个小写字母，1个数字 </p>
            <div class="my-button">
                <van-button type="danger" :disabled="flag" block @click="loginFn">
                    登录
                </van-button>
                <van-button class="zc" type="info" @click="$router.push('/register/step1')">
                    手机号注册
                </van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { Field, Button, Dialog, NavBar, Toast } from 'vant';
import { login } from "@/api/user";

import Vue from "vue";
Vue.use(Toast)
Vue.use(NavBar)
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Field);
export default {
    data() {
        return {
            type: 'password',
            typeIcon: 'closed-eye',
            loginname: '',
            password: ''
        }
    },
    methods: {
        // 点击登录的按钮
        loginFn() {
            login({
                loginname: this.loginname,
                password: this.password
            })
                .then(res => {
                    // console.log(res);
                    if (res.code == '10011') {
                        Toast('密码错误')
                    } else if (res.code == '10010') {
                        Toast('用户不存在')
                    } else {
                        Toast('登录成功')
                        // console.log(res);
                        this.$router.push('/user')
                        // 登录成功后要标记用户的状态
                        // 保存用户的 id
                        localStorage.setItem('userid', res.data.userid)
                        // 保存用户的 token
                        localStorage.setItem('token', res.data.token)
                        // 用户的登录状态
                        localStorage.setItem('loginState', true)
                        // 将全局状态中的登录状态改为 真

                        // console.log(this.$store);
                        // commit 是用来调用修改数据的 mutations
                        this.$store.commit('changeLoginState', true)

                    }
                })
        },
        changeType() {
            this.type = this.type === 'password' ? 'text' : 'password'
            this.typeIcon = this.type === 'password' ? 'closed-eye' : 'eye-o'
        }

    },
    computed: {
        flag() {
            // 请输入至少6位密码，包含至少一个大写字母，1个小写字母，1个数字
            if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
                return false
            } else {
                return true
            }

        }
    }
}
</script>
<style scoped>
.zc {
    margin-top: 50px;
    width: 80%;
    margin-left: 30px;
}
</style>